﻿
<script type="text/javascript">
    $('.chzn-drop').css('left', '0px');
    $('.chzn-drop').css('display', 'none');
    $('.chzn-single').on("click", function (e) {
        $(this).toggleClass('chzn-single-with-drop');
        $(this).next().toggleClass('visible');
        e.preventDefault();
    });
</script>

<style>
    .visible {
        display: block !important;
    }

    .chzn-results li:hover {
        background-color: #df4a43;
        color: white;
    }

    .form-group {
        width: 89%;
        text-align: left;
        margin: 0 auto;
    }

    .btn-fullcolor {
        width: 150px;
    }

    .pattern-bg{
        background-image: url("../images/banners/Transaction/recent-transaction.jpg");
        background-size: cover;
    }
    .pattern-bg.colored-bg:before{
        background-color: rgba(0,0,0,0.6);
    }


</style>

<!-- BEGIN PAGE TITLE/BREADCRUMB -->
<div class="parallax colored-bg pattern-bg" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title">Recently Transacted</h1>

                <!--<ul class="breadcrumb">
                    <li><a href="index.html">Home </a></li>
                    <li><a href="#">Properties</a></li>
                    <li><a href="properties-grid.html">Property Grid Listing</a></li>
                </ul>-->
            </div>
        </div>
    </div>
</div>
<!-- END PAGE TITLE/BREADCRUMB -->
<!-- BEGIN HOME ADVANCED SEARCH (class="gray" for a gray background) -->

<div id="advanced-search" class="gray open">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">

                <form>
                    <div class="form-group">
                        <div class="form-control-large">
                            <input ng-enter="search()" type="text" ng-model="property.keyword" class="form-control" name="location" placeholder="Road/Project Name">
                        </div>

                        <div class="form-control-small">
                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                <a ng-click="propertyTransactChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.TransactName }}</span><div><b></b></div>
                                </a>
                                <div ng-show="propertyTransactChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransact('S',false)">Sale</li>
                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTransact('R',false)">Rent</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="form-control-small">
                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                <a ng-click="propertyTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.TypeName }}</span><div><b></b></div>
                                </a>
                                <div ng-show="propertyTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('I',false)">Industrial</li>
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('D',false)">Development</li>
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('A',false)">Agriculture</li>
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('C',false)">Commercial</li>
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('R',false)">Residential</li>
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('O',false)">Others</li>
                                    </ul>
                                </div>
                            </div>
                        </div>



                   


                        <div class="form-control-small">
                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                <a ng-click="districtChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.districtName }}</span><div><b></b></div>
                                </a>
                                <div ng-show="districtChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li ng-repeat="d in districts" id="search_status_chzn_o_1" class="active-result"
                                            ng-mousedown="updateDistrict(d,false);">{{ d }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        



                    

                        <button ng-click="search()" type="submit" class="btn btn-fullcolor">Search</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<!-- END HOME ADVANCED SEARCH -->
<!-- BEGIN CONTENT WRAPPER -->
<div class="content">
    <div class="container">
        <div class="row">

            <div class="main col-sm-12">
                <span us-spinner="{radius:15, width:4, length: 20}"></span>

                <h2 ng-if="isEmpty(objects) && isSearch">Result not found!</h2>

                <h3> Search results </h3>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>Address</th>
                                <th>Project Name</th>
                                <th>Price (RM)</th>
                                <th>Land Type</th>
                                <th>Property Type</th>
                                <th>Land(m.sq)</th>
                                <th>Build Up(m.sq)</th>
                                <th>Trasaction Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="obj in objects | filter : paginate">
                                <td>{{obj.Alamat}}</td>
                                <td>{{obj.Kawasan}}</td>
                                <td>{{obj.Price}}</td>
                                <td>{{obj.LandType}}</td>
                                <td>{{obj.PropertyType}}</td>
                                <td>{{obj.Land}}</td>
                                <td>{{obj.BuildUp}}</td>
                                <td>{{obj.TransactionDate | date:"MM/dd/yyyy"}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!--<div lskpagination total-items="totalItems" ng-model="currentPage"
                                max-size="5" boundary-links="true"
                                items-per-page="numPerPage" class="pagination-sm">
                </div>-->

                <div>
                    <h2>
                        Count Per Page: <span>{{ numPerPage }}</span>
                    </h2>
                    <ul style="float:right; max-width:30%; border-top:0px;" class="pagination">
                        <li class="pagination-page" ng-class="{'active': is10Selected}">
                            <a ng-click="changePerPage(10)">10</a>
                        </li>
                        <li class="pagination-page" ng-class="{'active': is25Selected}">
                            <a ng-click="changePerPage(25)">25</a>
                        </li>
                        <li class="pagination-page" ng-class="{'active': is50Selected}">
                            <a ng-click="changePerPage(50)">50</a>
                        </li>
                        <li class="pagination-page" ng-class="{'active': is100Selected}">
                            <a ng-click="changePerPage(100)">100</a>
                        </li>
                    </ul>
                </div>

                <ul style="max-width:60%;" 
                    uib-pagination  
                    boundary-links="true" 
                    total-items="totalItems" 
                    ng-model="currentPage" 
                    items-per-page="numPerPage"
                    max-size="6"></ul>

                
                <!--<ul style="max-width:60%;"
                    uib-pagination
                    boundary-links="true"
                    total-items="totalItems"
                    ng-model="currentPage"
                    items-per-page="numPerPage"
                    max-size="6">
                </ul>-->


                <!--<lskpagination num-pages="numPerPage" current-page="currentPage" class="pagination-small"></lskpagination>-->

                <!--<div>
                    <table ng-table="tableParams" class="table table-striped" show-filter="true">
                        <tr ng-repeat="data in $data">
                            <td data-title="'Address'" sortable="'Address'" class="col-md-2" filter="{ 'Address': 'text'}">{{data.Alamat}}</td>
                            <td data-title="'Project Name'" sortable="'Kawasan'" class="col-md-2" filter="{ 'Kawasan': 'text'}">{{data.Kawasan}}</td>
                            <td data-title="'Price'" sortable="'Price'" align="center" class="col-md-1" filter="{ 'Price': 'text'}">{{data.Price | number}}</td>
                            <td data-title="'Land Type'" sortable="'LandType'" class="col-md-1" filter="{ 'LandType': 'text'}">{{data.LandType}}</td>
                            <td data-title="'Property Type'" sortable="'PropertyType'" class="col-md-1" filter="{ 'PropertyType': 'text'}">{{data.PropertyType}}</td>
                            <td data-title="'Land Area(m.sq)'" sortable="'Land'" align="center" class="col-md-1" filter="{ 'Land': 'text'}">{{data.Land}}</td>
                            <td data-title="'Build Up(m.sq)'" sortable="'BuildUp'" align="center" class="col-md-1" filter="{ 'BuildUp': 'text'}">{{data.BuildUp}}</td>
                            <td data-title="'Transaction Date'" sortable="'TransactionDate'" align="right" class="col-md-1" filter="{ 'TransactionDate': 'text'}">{{data.TransactionDate  | date:"MM/dd/yyyy"}}</td>
                        </tr>
                        <tr>
                            <td><strong>Count per page:</strong> {{tableParams.count()}}</td>
                            <td colspan="8" align="right">
                                <p><strong>Page:</strong> {{tableParams.page()}} </p>
                            </td>
                        </tr>

                    </table>
                </div>-->

            </div>


        </div>
    </div>
</div>
<!-- END CONTENT WRAPPER -->